<template>
  <div class="article" style="margin: 20px">
    <!-- 按钮组: 添加 / 删除选中 -->
    <el-row class="btns">
      <!-- <el-button @click="gotoLink">新建文章</el-button> -->
      <el-button @click="getAll">查询所有文章</el-button>
      <el-select v-model="value" placeholder="请选择文章分类">
        <el-option
          v-for="category in categories"
          :key="category.category_id"
          :label="category.category_alias"
          :value="category.category_alias"
        >
        </el-option>
      </el-select>
      <el-button
        class="btn-search"
        icon="el-icon-search"
        @click="handleGetAlias"
        >查询</el-button
      >
      <el-card class="article-table">
        <!-- 表格 -->
        <el-table border stripe :data="articleData" v-fit-columns>
          <el-table-column label="id" prop="id" width="50px"></el-table-column>
          <el-table-column label="标题" prop="title"></el-table-column>
          <el-table-column label="作者" prop="author"></el-table-column>
          <el-table-column
            label="分类"
            prop="alias"
            width="100px"
          ></el-table-column>
          <el-table-column label="点击量" prop="clicks"></el-table-column>
          <el-table-column label="发布日期" prop="pubdate"></el-table-column>
          <el-table-column label="操作">
            <template v-slot="article">
              <el-button size="mini" @click="handleUpdate(article.row.id)">
                编辑
                <i class="el-icon-edit"></i>
              </el-button>
              <el-button
                type="danger"
                size="mini"
                @click="removeArticle(article.row.id)"
              >
                删除
                <i class="el-icon-delete"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-sizes="[1, 5, 10]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-card>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Article',
  data() {
    return {
      alias: '',
      articleData: [], //表格的数据
      page: 1, // 当前的页码数
      pagesize: 5, // 每页显示记录数
      total: 0, //当前类别/所有类别文章数
      categories: [], //下拉框的类别
      value: '', //下拉框 记录当前类别名称
      form: '', //弹框 记录修改的文章信息
      dialogVisible: false, // 控制对话框是否显示
    }
  },
  created() {
    // 完成articleData的初始化
    this.getArticles()
    //console.log(this.articleData)
    this.getCategories()
  },
  methods: {
    //跳转ArticelAdd界面修改
    async handleUpdate(id) {
      const {
        result: { article },
      } = await this.$http.get('API/V1/articles/' + id, {
        params: { hasArticleInfo: 1 },
      })

      this.$router.push({
        path: '/home/article/modify',
        query: {
          //传article对象以及图片的url-->Article.vue
          article,
          pictureUrl: `http://localhost:7001/public/articles/${article.id}/cover.jpg`, //解析的图片名称
        },
      })
    },

    //删除文章
    async removeArticle(id) {
      await this.$http.delete('/API/V1/admin/articles/' + id)
      //console.log(result)
      if (this.value == '') {
        this.getArticles()
      } else {
        this.handleGetAlias()
      }
      this.$message.success('删除博文成功')
    },
    //查询所有
    getAll() {
      this.value = ''
      this.getArticles()
    },
    //获取类信息数组
    async getCategories() {
      const {
        result: { categories },
      } = await this.$http.get('/API/V1/categories')
      this.categories = categories
    },
    //根据类名称查询
    async handleGetAlias() {
      const {
        result: { article_infos },
      } = await this.$http.get('/API/V1/admin/articles', {
        params: {
          pagesize: this.pagesize,
          offset: (this.page - 1) * this.pagesize,
          category: this.value,
        },
      })
      this.articleData = article_infos
      this.getAliasTotal()
    },
    //获得当前类的总数
    async getAliasTotal() {
      const {
        result: { category_statistics },
      } = await this.$http.get('/API/V1/categories/statistics')
      console.log(category_statistics)
      //filter结果是空数组, 很奇怪  解决了 简写省略return时, 要同时省略大括号
      console.log(this.value)
      this.total = category_statistics.filter((item) => {
        return item.category_alias == this.value
      })[0].article_total
    },

    //查询所有文章
    async getArticles() {
      const {
        result: { article_infos, total },
      } = await this.$http.get('/API/V1/admin/articles', {
        params: {
          pagesize: this.pagesize,
          offset: (this.page - 1) * this.pagesize,
        },
      })
      this.articleData = article_infos
      console.log(this.articleData)
      this.getTotal()
    },
    //查询文章总数
    async getTotal() {
      this.total = 0
      const {
        result: { category_statistics },
      } = await this.$http.get('/API/V1/categories/statistics')
      category_statistics.forEach((item) => {
        this.total += item.article_total
      })
    },

    handleSizeChange(val) {
      this.pagesize = val
      if (this.value == '') {
        this.getArticles()
      }
      this.handleGetAlias()
    },
    handleCurrentChange(val) {
      this.page = val
      if (this.value == '') {
        this.getArticles()
      }
      this.handleGetAlias()
    },
  },
}
</script>
<style>
.btns {
  padding: 10px;
  margin: 20px;
  background-color: #f5f3f1;
}
.btns btn-search1 {
  padding: 10px;
}
.article-table {
  margin-top: 20px;
}
.el-row.btns {
  width: 950px;
}
.btns .el-button {
  margin-right: 30px;
}
</style>
